import { useState, useCallback } from "react";
import "./Window.scss";

const holesList = [
  {
    className: "hole0",
    text: "△",
  },
  {
    className: "hole1",
    text: "○",
  },
  {
    className: "hole2",
    text: "□",
  },
  {
    className: "hole3",
    text: "ﾉ",
  },
  {
    className: "hole4",
    text: "♥",
  },
  {
    className: "hole5",
    text: "reset",
  },
];

export default function Window(props) {
  const { text, handleText, styleOpt, handleHoleClick } = props;

  const [windowText, setWindowText] = useState("");

  const handleTheHoleClick = useCallback(
    (key, text) => {
      setWindowText(text);
      setTimeout(() => {
        setWindowText("");
      }, 1000);
      handleHoleClick(key);
    },
    [handleHoleClick]
  );

  return (
    <div
      className="window"
      onMouseEnter={() => handleText(text)}
      onMouseLeave={() => handleText("")}
      style={{ background: styleOpt.windowColor }}
    >
      <div class="secret-text">{windowText}</div>
      <div
        className="window-inside"
        style={{
          background: styleOpt.insideColor,
        }}
      >
        <div className="holes">
          {holesList.map((item, key) => {
            return (
              <div
                className={item.className}
                key={key}
                style={{
                  background: styleOpt.holeColor[key],
                  height: styleOpt.holeHeight[key],
                }}
                onClick={() => handleTheHoleClick(key, item.text)}
              ></div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
